﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="../js/vue.js"></script>
		<script src="../js/element-ui.min.js"></script>
		<link rel="stylesheet" href="../css/element-ui.css">
		<link rel="stylesheet" href="../css/index.css">
    	<link rel="stylesheet" href="../css/common.css" />
		<script src="../js/axios.min.js"></script>
		<script src="../js/main.js"></script>

		<title>登录页面</title>
		<style type="text/css">
			body {
				background-image: url(../images/login_back.png);
			}
			html,body{
				height: 100%;
			}
			.logo {
				width: 140px;
				height: 140px;
				/*left: 420px;
				top: 101px;
				position: absolute;*/
			}
			.title {
				font-family: PingFangSC-Semibold;
				font-size: 50px;
				color: #FFFFFF;
				letter-spacing: 0px;
				line-height: 70px;
				left: 30px;
				top: -45px;
				position: relative;
			}
			.denglu {
				text-align: center;
				width: 100%;
				height: 48px;
				font-family: PingFangSC-Semibold;
				font-size: 34px;
				color: #323232;
				letter-spacing: 0px;
				line-height: 48px;
				margin-top: 50px;
				position: relative;
			}
			.demo-ruleForm {
				margin: 0 auto 50px;
				position: relative;
				/*left: 652px;*/
				left: 0;
				top: 5%;
				width: 587px;
				height: 517px;
				opacity: 0.9;
				background: #FFFFFF;
				border-radius: 10px;
				overflow: hidden;
			}
			.name {
				width: 432px;
				height: 60px;
				margin-left: 77px;
				margin-top: 23px;
				position: relative;
			}
			.pass {
				width: 432px;
				height: 60px;
				margin-left: 77px;
				margin-top: 33px;
				position: relative;
			}
			.formitem {
				background: rgba(255,255,255,0.00);
				border: 0px solid #AEAEAE;
				border-radius: 10px;
			}
			.verify_css {
				width: 291px;
				height: 59.6px;
				margin-left: 0;
				margin-top: -10px;
				position: relative;
			}
			.yanzhengma {
				top: 13px;
				/*margin-left: 31px;*/
				position: relative;
			}
			.login_btn_text {
				font-family: MicrosoftYaHei;
				font-size: 28.19px;
				color: #FFFFFF ;
				letter-spacing: 0;
			}
			.login-button {
				width: 432px;
				height: 65px;
				margin-left: 77px;
				margin-top: 23.4px;
				background-image: linear-gradient(90deg, #1D5899 0%, #157DD4 100%);
				border-radius: 10px;
			}
			.toregist {
				margin-right: 59px;
				/*margin-bottom: 35px;*/
				line-height: 1.3em;
				font-family: PingFangSC-Medium;
				font-size: 16px;
				color: #323232;
				letter-spacing: 0;
			}
			.verify_all {
				width: 432px;
				height: 59.6px;
				margin-left: 77px;
				margin-top: 28px;
			}

			.error-text{
				padding: 100px 0;
				color: #000;
				font-size: 35px;
				/* border: 1px solid #ddd;
				margin: 0 56px; */
				background-color: #fff;
				-webkit-border-radius: 20px;
				-moz-border-radius: 20px;
				border-radius: 20px;
				text-align: center;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			}
		</style>
	</head>

	<body>
		<div id="app" style="height: 100%;">
			<div class="error-wrap" style="display: none;height: 100%;">
				<div style="position: relative;top: 50%;margin: -123px auto 0;width: 70.83333%;">
					<div class="error-text">
						请您用除IE浏览器<!--和360浏览器-->之外的浏览器访问，谢谢您的配合！！
					</div>
				</div>
			</div>
			<div class="login-wrap" style="display: none;height: 100%;">
				<el-row style="padding-top: 5%;">
					<el-col style="text-align: center;">
						<img src="../images/loginlogo.png"  class="logo">
						<span class="title">地震执法监管系统</span>
					</el-col>
				</el-row>
				<el-form :model="loginForm" status-icon :rules="rules" ref="loginForm"  class="demo-ruleForm" @keyup.native.enter="submitForm('loginForm')">
					<h3 class="denglu">登&emsp;录</h3>
					<el-form-item class="name formitem" prop="loginName">
						<el-input prefix-icon="el-icon-user" v-model="loginForm.loginName" placeholder="请输入用户名"></el-input>
					</el-form-item>
					<el-form-item class="pass formitem"  prop="password">
						<el-input prefix-icon="el-icon-key" placeholder="请输入密码" v-model="loginForm.password" show-password></el-input>
					</el-form-item>
					<!--<el-form-item class="formitem verify_all" prop="verifyCode" >
						<el-input class="verify_css" placeholder="请输入4位验证码" v-model="loginForm.verifyCode" @keyup.enter.native="submitForm('ruleForm')"></el-input>
						<span class="yanzhengma" id="v_container"></span>
					</el-form-item>-->
					<el-form-item >
						<el-button class="login-button" type="primary" @click="submitForm('loginForm')">
							<span class="login_btn_text">登&nbsp;录</span>
						</el-button>
					</el-form-item>
					<el-form-item style="float: right;margin-top: 10px;">
						<div class="toregist">若没有账号，请使用游客账号登录</div>
						<div class="toregist">账号：<span style="margin-right: 1em;color: #002d5d;font-weight: bold;">youke</span>  密码：<span style="color: #002d5d;font-weight: bold;">123456</span></div>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<script type="text/javascript" src="../js/verifyCode.js"></script>
		<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="../js/checkBrower.js"></script>
		<script>
			var login = new Vue({
				el: '#app',
				data() {
					let checkCode = (rule, value, callback) => {
						var verifyFlag = this.verifyCode.validate(value);
               			if (!verifyFlag) {
                   			callback(new Error('验证码不正确'));
                		} else {
                   			callback();
              			}
            		}
					let checkloginName = (rule, value, callback) => {
						if (!this.checkWord(value)) {
		                    callback(new Error('请输入字母或数字组成的用户名,长度在 1 到 20 个字符'));
		                } else {
		                    callback();
		                }
            		}
					return {
						loginForm: {
							loginName: "",
							password: "",
							verifyCode: "",
						},
						rules: {
							loginName: [{
									required: true,
									message: '请输入用户名',
									trigger: 'blur'
								}, //触发
								{
									min: 2,
									max: 50,
									message: '长度在 1 到 20 个字符',
									trigger: 'blur'
								},{
									validator: checkloginName,
									trigger: 'blur'
								}
							],
							password: [{
									required: true,
									message: '请输入密码',
									trigger: 'blur'
								}, //触发
								{
									min: 6,
									message: '密码不小于6位',
									trigger: 'blur'
								}
							],
							verifyCode: [{
								required: true,
								message: '请输入验证码',
								trigger: 'blur'
							},{
								validator: checkCode,
								trigger: 'blur'
							}]
						}
					}
				},
				mounted() {
					this.verifyCode = new GVerify('v_container');
                    var url =location.search.substr(1).split(/=/);
                    var toUrl=decodeURIComponent(url[1]);
                    console.log(toUrl);
				},
				methods: {
					resetForm(formName) {
						this.$refs[formName].resetFields();
					},
					submitForm(formName) {
						// 获取验证码
						/*var verifyCode = this.ruleForm.verifyCode;
						var verifyFlag = this.verifyCode.validate(verifyCode);
						if(!verifyFlag) {
							that.$message.error({
								title: '系统提示',
								message: '验证码输入错误'
							})
						}*/
						this.$refs[formName].validate((valid) => {
							if(valid) {
								axios({
									method: 'post',
									url: appBaseUrl + '/login/doLogin',
									// url: 'http://10.13.16.135:8081/base/user/doLogin',
									data: this.loginForm
								})
								.then(response => {
									let data = response.data;
									if(data.code == 200) {
										localStorage.setItem("userInfo", JSON.stringify(data.data));
										location.href = location.origin + appBaseUrl + '/index.html';
									} else {
										this.$message.error(data.msg);
									}
								})
								.catch(function(error) {
									console.log(error);
								});
							} else {
								console.log("login error!!");
								return false;
							}
						});
					},
					// 验证用户名
		            checkWord(str) {
		                let re = /^[A-Za-z0-9]{1,20}$/
		                if (re.test(str)) {
		                    return true;
		                } else {
		                    return false;
		                }
		            }
				}
			})
		</script>
	</body>
</html>